<template>
	<view>
		<view class="padding-lr">
			<view class="text text-xl padding-top-sm text-bold">登录</view>
			<view class="text-lg padding-tb-sm">您好，欢迎来到智税咨询</view>
		</view>
		<view class="padding margin flex bg-gray round align-center">
			<view class="padding-lr-sm solid-right">
				<view>
					+86<text class="icon-triangledownfill margin-left-xs"></text>
				</view>
			</view>
			<view class="padding-lr-sm"><input v-model="username" style="width: 100%;" type="text" placeholder="请输入手机号" class="text-df" /></view>
		</view>
		<view v-if="isPass" class="padding margin flex bg-gray round align-center">
			<view class="padding-lr-sm"><input v-model="password" type="password" style="width: 100%;" placeholder="请输入登录密码" class="text-df" /></view>
		</view>
		<view v-else class="padding margin flex bg-gray round align-center">
			<view style="flex-grow: 1;" class="padding-lr-sm"><input v-model="code" type="text" style="width: 100%;" placeholder="请输入验证码" class="text-df" /></view>
			<view @click="getValidate" class="padding-lr-sm solid-left text-orange">{{show?"获取验证码":`已发送${count}s`}}</view>
		</view>
		<view class="cu-bar justify-center padding-lr" style="width: 100%;">
			<button :class="[(username&&code) || (username && password)?'bg-gradual-orange':'bg-gray']"
			 @click="submit" class="cu-btn lg round" style="width: 100%;padding-top: 45upx;padding-bottom: 45upx;">登录</button>
		</view>
		<!-- #ifdef MP -->
		<view class="flex align-center justify-center" style="margin-top: 144rpx;">
			<image src="../../static/line.png" mode="aspectFill" style="height: 4rpx;width: 244rpx;"></image>
			<view class="lem-text-xl" style="color: #848582;margin-left: 22rpx;margin-right: 22rpx;">快速登录</view>
			<image src="../../static/line.png" mode="aspectFill" style="height: 4rpx;width: 244rpx;"></image>
		</view>
		<view class="flex align-center justify-center" style="margin-top: 50rpx;">
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="getUserInfo" @getuserinfo="wxMpLogin" class="l-btn flex align-center justify-center flex-direction">
				<image class="round" src="../../static/auth_image/weixindefuben@3x.png" mode="aspectFit"
				style="width: 84rpx;height: 84rpx;"></image>
				<view class="text-lg" style="color: #848582;">微信</view>
			</button>
			<!-- #endif -->
			<!-- #ifdef MP-QQ -->
			<button open-type="getUserInfo" @getuserinfo="qqMpLogin" class="l-btn flex align-center justify-center flex-direction">
				<image class="round" src="../../static/auth_image/qq_icon.png" mode="widthFix"
				style="width: 144rpx;height: 144rpx;margin-bottom: 10rpx;"></image>
				<view class="text-lg" style="color: #848582;">QQ</view>
			</button>
			<!-- #endif -->
		</view>
		<!-- #endif -->
		<view class="text-center padding-lr padding-tb-xl flex justify-end" style="position: absolute;bottom: 50rpx;width: 100%;">
			<!-- <view @click="click1" class="">{{isPass?'验证码登录':'账号密码登录'}}</view> -->
			<view @click="click2" class="">注册</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				show:true,
				timer:null,
				count:'',
				username:'',
				password:'',
				isPass:true,//是否账号密码登录
				array:['+86','+85','+101','+102'],
				index:0,
				key:'',
				code:'',
				mpWxCode:''
			}
		},
		computed:{
			...mapState(['config'])
		},
		onLoad(op) {
			// #ifdef MP
			if(op.quickLogin){
				this.mpPreLogin()
			}
			let provider = '';
			// #ifdef MP-WEIXIN
			provider = 'weixin';
			// #endif
			// #ifdef MP-QQ
			provider = 'qq';
			// #endif
			uni.login({
				provider: provider,
				success: (res) => {
					console.log(res)
					if(res.errMsg == 'login:ok'){
						this.mpWxCode = res.code
					}
				}
			})
			// #endif
		},
		methods: {
			mpPreLogin(){
				let provider = '';
				// #ifdef MP-WEIXIN
				provider = 'weixin';
				// #endif
				// #ifdef MP-QQ
				provider = 'qq';
				// #endif
				uni.showLoading({title:'请稍等...'})
				uni.login({
					provider: provider,
					success: (res) => {
						console.log(res)
						if(res.errMsg == 'login:ok'){
							// this.mpWxCode = res.code
							let api = '/api/member/wxMpQuickLogin';
							// #ifdef MP-WEIXIN
							api = '/api/member/wxMpQuickLogin'
							// #endif
							// #ifdef MP-QQ
							api = '/api/member/qqMpQuickLogin'
							// #endif
							
							this.$request(api,'POST',{
								code:res.code
							}).then(ret => {
								console.log(ret)
								uni.hideLoading()
								if(ret.status == 200){
									uni.showToast({
										title:"登录成功"
									})
									ret.data.token = ret.token
									uni.setStorageSync('userInfo',ret.data);
									uni.setStorageSync('token',ret.token)
									this.login(ret.data)
														
									if(!ret.data.mobile){
										uni.showModal({
											title:"绑定手机",
											content:"绑定手机号就可以发布内容啦！",
											cancelText:"先跳过",
											confirmText:"去绑定",
											success: (rs) => {
												if(rs.confirm){
													uni.redirectTo({
														url:'../regiester/regiester?bindMob=1'
													})
												}else{
													uni.switchTab({
														url:"../index/index"
													})
												}
											}
										})
									}else{
										uni.navigateBack({
											delta:1
										})
									}
								}
							})
						}
						
					}
				});
			},
			async getValidate(){
				if(!(/^1(3|4|5|7|8)\d{9}$/.test(this.username))){ 
					uni.showToast({
						title:"请输入正确的手机号码",
						icon:"none"
					})
					return false; 
				}
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					//此处写提交获取验证码的请求
					this.$request("/api/base/smsbao","GET",{mobile:this.username}).then(res=>{
						if(res.status == 200){
							uni.showToast({
								title:res.msg,
								icon:"none"
							})
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= TIME_COUNT) {
									this.count--;
								} else {
									this.show = true;
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
							this.key = res.key
						}else{
							uni.showToast({
								title:res.msg,
								icon:"none"
							})
						}
					}).catch(err=>{
						this.$failToast()
					})
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
			},
			click1(){
				this.isPass?this.isPass = false : this.isPass = true
			},
			click2(){
				uni.navigateTo({
					url:"../regiester/regiester"
				})
			},
			bindPickerChange(e){
				this.index = e.target.value
			},
			submit(){
				uni.showLoading({})
				//账号密码登录
				if(this.isPass){
					if(!this.password || !this.username){
						uni.hideLoading()
						return
					}
					this.$request("/api/Member/login","POST",{
						mobile:this.username,passwd:this.password
					}).then(res=>{
						console.log(res)
						if(res.status == 200){
							uni.hideLoading()
							uni.showToast({
								title:"登录成功"
							})
							res.data.token = res.token
							uni.setStorageSync('userInfo',res.data);
							uni.setStorageSync('token',res.token)
							this.login(res.data)
							setTimeout(function() {
								uni.reLaunch({
									url: "../index/home"
								})
							}, 100);
						} else {
							uni.hideLoading()
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					}).catch(err=>{
						uni.hideLoading()
						this.$failToast(err)
						// console.log(err)
					})
				}else{
					if(!this.code || !this.username || !this.key){
						uni.hideLoading()
						this.$failToast('参数错误')
						return
					}
					this.$request("/api/member/validateLogin","POST",{
						mobile:this.username,code:this.code,key:this.key
					}).then(res=>{
						console.log(res)
						uni.hideLoading()
						if(res.status == 200){
							uni.showToast({
								title:"登录成功"
							})
							res.data.token = res.token
							uni.setStorageSync('userInfo',res.data);
							uni.setStorageSync('token',res.token)
							this.login(res.data)
							setTimeout(function() {
								uni.switchTab({
									url:"../index/index"
								})
							}, 800);
						}else if (res.status == 201){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					}).catch(err=>{
						uni.hideLoading()
						this.$failToast(err)
						// console.log(err)
					})
				}
			},
			async wxMpLogin(e){
				console.log(e)
				uni.showLoading({})
				// let [err,ret] = await uni.login({
				// 	provider:'weixin'
				// })
				// console.log(ret)
				if(!this.mpWxCode){
					uni.hideLoading()
					this.$failToast('第三方登录失败')
					return
				}
				this.$request('/api/member/wxMpLogin','POST',{
					code: this.mpWxCode,
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv
				}).then(res => {
					console.log(res)
					if(res.status == 200){
						uni.hideLoading()
						uni.showToast({
							title:"登录成功"
						})
						res.data.token = res.token
						uni.setStorageSync('userInfo',res.data);
						uni.setStorageSync('token',res.token)
						this.login(res.data)
					
						if(!res.data.mobile){
							uni.showModal({
								title:"绑定手机",
								content:"绑定手机号就可以发布内容啦！",
								cancelText:"先跳过",
								confirmText:"去绑定",
								success: (res) => {
									if(res.confirm){
										uni.redirectTo({
											url:'../regiester/regiester?bindMob=1'
										})
									}else{
										uni.switchTab({
											url:"../index/index"
										})
									}
								}
							})
						}else{
							setTimeout(function() {
								uni.switchTab({
									url:"../index/index"
								})
							}, 800);
						}
					}else if (res.status == 201){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			async qqMpLogin(e){
				console.log(e)
				uni.showLoading({})
				// let [err,ret] = await uni.login({
				// 	provider:'qq'
				// })
				// console.log(ret)
				if(!this.mpWxCode){
					uni.hideLoading()
					this.$failToast('第三方登录失败')
					return
				}
				let user = e.detail.userInfo
				this.$request('/api/member/qqMpLogin','POST',{
					code: this.mpWxCode,
					parent_id:'',
					...user
				}).then(res => {
					console.log(res)
					uni.hideLoading()
					if(res.status == 200){
						uni.hideLoading()
						uni.showToast({
							title:"登录成功"
						})
						res.data.token = res.token
						uni.setStorageSync('userInfo',res.data);
						uni.setStorageSync('token',res.token)
						this.login(res.data)
					
						if(!res.data.mobile){
							uni.showModal({
								title:"绑定手机",
								content:"绑定手机号就可以发布内容啦！",
								cancelText:"先跳过",
								confirmText:"去绑定",
								success: (res) => {
									if(res.confirm){
										uni.redirectTo({
											url:'../regiester/regiester?bindMob=1'
										})
									}else{
										uni.switchTab({
											url:"../index/index"
										})
									}
								}
							})
						}else{
							setTimeout(function() {
								uni.switchTab({
									url:"../index/index"
								})
							}, 800);
						}
					}else if (res.status == 201){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			...mapMutations(['login'])
		}
	}
</script>

<style>
	/*每个页面公共css */
	@import url("@/static/style/color-ui.css");
	page{
		background-color: #fff;
	}

	.l-btn{
		padding: 0;
		background-color: #fff;
	}
	
	.l-btn::after{
		padding: 0;
		border: 0;
	}
</style>
